<template>
    <div class="musicmenlivein">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="top-steps padding-24 ">
            <ul class="space-between">
                <li v-for="(item,index) in steps" :key="index" :class="{current:index<step}">
                    <p class="num fs-24 color-f center">{{index+1}}</p>
                    <p class="step fs-30">{{item.text}}</p>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="terms bg-f" v-if="step==1">
                <p class="fs-32 title">MET音乐人服务条款</p>
                <p class="color-9 text padding-24">{{terms}}</p>
            </div>
            <div class="singer-info" v-if="step==2">
                <div class="info-list bg-f fs-32">
                    <div class="list-item space-between padding-24 ">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">艺人名</p></div>
                        <p>{{singerinfo.name}}</p>
                    </div>
                    <div class="list-item space-between padding-24 arrow-right">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">艺人背景</p></div>
                        <div class="right bg-e">
                            <img :src="singerinfo.singer_avator" alt="" v-if="singerinfo.singer_avator">
                            <input type="file"  ref="avatarInput" @change='updataimg($event)' accept="image/*" class="updata-input">
                        </div>
                    </div>
                    <div class="list-item space-between padding-24 arrow-right">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">性别</p></div>
                        <select name="" id="" v-model="singerinfo.sex" class="rights fs-32 color-9" >
                            <option disabled value="">请选择</option>
                            <option :value="item.singer_category_id" v-for="(item,index) in sex" :key="index">{{item.singer_category_name}}</option>
                            <!-- <option value="女">女</option> -->
                        </select>
                    </div>
                    <div class="list-item space-between padding-24 arrow-right">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">地区</p></div>
                        <select name="" id="" v-model="singerinfo.region" class="rights fs-32 color-9" >
                            <option disabled value="">请选择</option>
                            <option :value="item.singer_category_id" v-for="(item,index) in region" :key="index">{{item.singer_category_name}}</option>
                        </select>
                    </div>
                    <div class="list-item space-between padding-24 arrow-right">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">流行风格</p></div>
                        <select name="" id="" v-model="singerinfo.style" class="rights fs-32 color-9" >
                            <option disabled value="">请选择</option>
                            <option :value="item.singer_category_id" v-for="(item,index) in style" :key="index">{{item.singer_category_name}}</option>
                        </select>
                    </div>
                    <div class="list-item space-between padding-24">
                        <div class="left center-col"><p class="color-6">所属公司/厂牌</p></div>
                        <input type="text" class="input fs-32" placeholder="请填写" v-model="singerinfo.company">
                    </div>
                </div>
                <div class="singer-description bg-f padding-24">
                    <p class="title fs-32 color-6">歌手描述</p>
                    <textarea placeholder="歌手描述" v-model="singerinfo.description"></textarea>
                </div>
            </div>
            <div class="singer-info" v-if="step==3">
                <div class="info-list bg-f fs-32">
                    <div class="list-item center-col padding-24">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">真实姓名</p></div>
                        <input type="text" placeholder="请输入您的真实姓名" class="textinput" v-model="singerinfo.realname">
                    </div>
                    <div class="list-item center-col padding-24">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">绑定手机号</p></div>
                        <input type="text" placeholder="请输入绑定的手机号" class="textinput" maxlength="11" v-model="singerinfo.phone">
                    </div>
                    <div class="list-item center-col padding-24">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">验证码</p></div>
                        <input type="number" placeholder="验证码" class="vcodeinput" v-model="singerinfo.vcode">
                        <div class="color-active" @click="getcode(singerinfo.phone)">{{ctext}}</div>
                    </div>
                    <div class="list-item center-col padding-24">
                        <div class="left center-col"><i class="color-r">*</i><p class="color-6">证件号码</p></div>
                        <input type="text" placeholder="请输入您的身份证号码" class="textinput" maxlength="18" v-model="singerinfo.idnum">
                    </div>
                </div>
                <div class="img-info bg-f padding-24">
                    <div class="img-item">
                        <div class="title center-col"><i class="color-r">*</i><p class="color-6">身份证正面照片</p></div>
                        <div class="img-box bg-f5 center fs-36">
                            <p v-if="singerinfo.idpimg==''">+</p>
                            <img :src="singerinfo.idpimg" alt="" v-else>
                            <input type="file"  ref="avatarInput" @change='updataid($event,1)' accept="image/*" class="updata-input">
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="title center-col"><i class="color-r">*</i><p class="color-6">身份证背面照片</p></div>
                        <div class="img-box bg-f5 center fs-36">
                            <p v-if="singerinfo.idbimg==''">+</p>
                            <img :src="singerinfo.idbimg" alt="" v-else>
                            <input type="file"  ref="avatarInput" @change='updataid($event,2)' accept="image/*" class="updata-input">
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="title center-col"><i class="color-r">*</i><p class="color-6">手持证件人像图</p></div>
                        <div class="img-box bg-f5 center fs-36">
                            <p v-if="singerinfo.idhimg==''">+</p>
                            <img :src="singerinfo.idhimg" alt="" v-else>
                            <input type="file"  ref="avatarInput" @change='updataid($event,3)' accept="image/*" class="updata-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="step4 bg-f" v-if="step==4">
                <p class="fs-36">信息已提交，正在审核中</p>
                <p class="color-9">一般审核时间为1-3天</p>
            </div>
        </div>
        <div class="foot-btn bg-f">
            <div class="step1 padding-24" v-if="step==1">
                <div class="center-col">
                    <div class="center" :class="{selected:select==true}" @click="changeselect"><p></p></div>
                    <p class="color-9">我已阅读并同意《MET音乐平台使用协议》</p>
                </div>
                <div class="bg-p color-f center fs-32" @click="next">下一步</div>
            </div>
            <div class="step2 padding-24" v-if="step==2">
                <div class="fs-26 color-6">如有其他资料可发至邮邮箱********</div>
                <div class="space-between color-f fs-32">
                    <div class="last center" @click="goback">上一步</div>
                    <div class="bg-p center" @click="next">下一步</div>
                </div>
            </div>
            <div class="step2 padding-24" v-if="step==3">
                <div></div>
                <div class="space-between color-f fs-32">
                    <div class="last center" @click="goback">上一步</div>
                    <div class="bg-p center" @click="next">确认提交</div>
                </div>
            </div>
            <div class="step1 padding-24" v-if="step==4">
                <div class="bg-p color-f center fs-32" @click="end">完成</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            select:false,
            isBack:true,
            singerinfo:{
                name:'',
                singer_avator:'',
                sex:'',
                region:'',
                style:'',
                description:'',
                company:'',
                phone:'',
                realname:'',
                idnum:'',
                vcode:null,
                idpimg:'',
                idbimg:'',
                idhimg:''
            },
            sex:[],
            region:[],
            style:[],
            title:'音乐人入驻',
            step:1,
            count: 60,
            ctext: '获取验证码',
            steps:[
                {
                    text:'入驻协议',
                },
                {
                    text:'基本信息',
                },
                {
                    text:'实名认证',
                },
                {
                    text:'提交审核',
                }
            ],
            terms:'服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服务条款服',
        }
    },
    created(){
        this.getname()
        this.getSingersex()
        this.getSingerregion()
        this.getSingerstyle()
    },
    methods:{
        getname(){
            this.singerinfo.name = sessionStorage.getItem('name')
            //console.log(this.singerinfo.name)
        },
        getSingersex(){
            let url = this.$host1 + `home/getSingerCategoryList`
            this.$axios.get(url,{
                params:{
                    singer_category_name:'性别',
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.sex=resData.data
                    } else{
                        this.sex=[]
                    }
                }
            }).catch(() => {
                this.sex=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getSingerregion(){
            let url = this.$host1 + `home/getSingerCategoryList`
            this.$axios.get(url,{
                params:{
                    singer_category_name:'地区',
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.region=resData.data
                    } else{
                        this.region=[]
                    }
                }
            }).catch(() => {
                this.region=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getSingerstyle(){
            let url = this.$host1 + `home/getSingerCategoryList`
            this.$axios.get(url,{
                params:{
                    singer_category_name:'流行风格',
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.style=resData.data
                    } else{
                        this.style=[]
                    }
                }
            }).catch(() => {
                this.style=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        updataimg(e) {
            var formdata1=new FormData();// 创建form对象
            var file = e.target.files[0];
            var reader = new FileReader();
            var that = this
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                
                
            }
            formdata1.append('file',file);
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            var url =this.$host1 + `upload_file`
            this.$axios.post(url,formdata1,config).then((response) => {
                console.log(response)
               
                that.singerinfo.singer_avator=response.data.dest
                   
                this.AlertWin("上传成功！");
                //this.imgUrl1=response.data.dest
                //this.getuseridinfo(this.imgUrl1)
            })
        }, 
        updataid(e,i){
            var formdata1=new FormData();// 创建form对象
            var file = e.target.files[0];
            var reader = new FileReader();
            var that = this
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                
            }
            formdata1.append('file',file);
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            var url =this.$host1 + `upload_file`
            this.$axios.post(url,formdata1,config).then((response) => {
                console.log(response)
                if(i==1){
                    that.singerinfo.idpimg = response.data.dest
                }else if(i==2){
                    that.singerinfo.idbimg=response.data.dest
                }else if(i==3){
                    that.singerinfo.idhimg=response.data.dest
                }
                this.AlertWin("上传成功！");
                //this.imgUrl1=response.data.dest
                //this.getuseridinfo(this.imgUrl1)
            })
        },
        next(){
            if(this.step==1){
                if(this.select==false){
                    this.AlertWin('请确认音乐人服务条款！');
                }else{
                    this.step=2
                }
            }else if(this.step==2){
                if(this.singerinfo.name==''){
                    this.AlertWin('艺人名称不能为空！');
                }else if(this.singerinfo.singer_avator==''){
                    this.AlertWin('请上传艺人背景图片！');
                }else if(this.singerinfo.sex==''){
                    this.AlertWin('请选择艺人性别！');
                }else if(this.singerinfo.region==''){
                    this.AlertWin('请选择区域！');
                }else if(this.singerinfo.style==''){
                    this.AlertWin('请选择流行风格！');
                }else{
                    //console.log(this.singerinfo)
                    //sessionStorage.setItem('data',JSON.stringify(this.singerinfo))
                    //var data=JSON.parse(sessionStorage.getItem('data')) 
                    //console.log(data)
                    this.step=3
                    
                }
            }else if(this.step==3){
                if(this.singerinfo.realname==''){
                    this.AlertWin('真实姓名不能为空！');
                }else if(this.singerinfo.phone==''){
                    this.AlertWin('手机号不能为空！');
                }else if(this.singerinfo.vcode==''){
                    this.AlertWin('请输入验证码！');
                }else if(this.singerinfo.idnum==''){
                    this.AlertWin('请输入身份证号！');
                }else if(this.singerinfo.idpimg==''){
                    this.AlertWin('身份证正面照片不能为空！');
                }else if(this.singerinfo.idbimg==''){
                    this.AlertWin('身份证背面照片不能为空！');
                }else if(this.singerinfo.idhimg==''){
                    this.AlertWin('请上传手持身份证照片！');
                }else{
                    //console.log(this.singerinfo)
                    this.registerSinger()
                    
                }
                
            }
            
        },
        end(){
            this.$router.push('/account')
        },
        registerSinger(){
            var obj=this.singerinfo
            var data={
                singer_artistic_name:obj.name,
                singer_avator:obj.singer_avator,
                sex:obj.sex,
                region:obj.region,
                fashion_style:obj.style,
                belong_to:obj.company,
                singer_message:obj.description,
                singer_true_name:obj.realname,
                id_card:obj.idnum,
                id_front_photo:obj.idpimg,
                id_back_photo:obj.idbimg,
                id_all_photo:obj.idhimg,
                mobile:obj.phone,
                vcode:obj.vcode,
            }
            let url = this.$host1 + `home/registerSinger`
            this.$axios.post(url,data).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.AlertWin("提交成功！");
                        this.step=4
                    } else{
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getcode (tel) {
            //return
            var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; //手机号验证
            var that = this
            var settime = function (that) {
            var timeOut
            if (that.count == 0) {
            // ctext: '获取验证码',
            that.ctext = '获取验证码'
            that.count = 60
            clearTimeout(timeOut)
            return
            } else {
            that.ctext = '重新发送' + that.count + '秒'
            that.count--
            }
            setTimeout(function () {
            settime(that)
            }, 1000)
            }
            if (tel == "") {
                this.AlertWin("手机号不能为空");
            } else if (!myreg.test(tel)) {
                this.AlertWin("请输入正确的手机号！");
            }else if (that.ctext == '获取验证码') {
                settime(that)
                var data = {
                'mobile': tel
                }
                var url = this.$host1 + `home/sendCode`;
                this.$axios.post(url, data).then(res => {
                var resData = res.data;
                //console.log(resData);
                if (resData.code == 200) {
                    this.AlertWin("发送成功！");
                    // setTimeout(()=>{
                    //     that.paramData.code = resData.vcode;
                    // },3000)
                    
                    } else {
                        this.AlertWin(resData.message);
                    }
                }).catch(() => {
                    this.AlertWin("网络错误！请稍后重试！");
                });
            }
        },
        goback(){
            this.step--
        },
        changeselect(){
            this.select=!this.select
        }
    }
}
</script>
<style lang="scss" scoped>
.musicmenlivein{
    .top-steps{
        margin-top: 1rem;
        height: 1.8rem;
        //background-color: greenyellow;
        .space-between{
            height: 100%;
            li{
                text-align: center;
                //height: 100%;
                //background-color: #fff;
                .num{
                    margin: 0 auto;
                    background-color: #999;
                    width: 0.38rem;
                    height: 0.38rem;
                    border-radius: 50%;

                }
                
                .step{
                    margin-top: 0.2rem
                }
            }
            .current{
                .num{
                    background-color: #F44349;
                }
                .step{
                    color: #F44349;
                }
            }
        }
        .space-between::after{
            content: "";
            width:5.5rem;
            height: 0.01rem;
            margin-left: 0.8rem;
            margin-top: -0.3rem;
            z-index: -1;
            background-color: #ddd;
            position: absolute;
        }
    }
    .content{
        height: auto;
        .terms{
            padding-bottom: 0.3rem;
            .title{
                text-align: center;
                line-height: 1.5rem;
            }
            .text{
                text-indent:0.56rem;
            }
        }
        .singer-info{
            .info-list{
                .list-item{
                    height: 1rem;
                    border-bottom: 0.01rem solid #e9e9e9;
                    input{
                        font-size: 0.32rem
                    }
                    .left{
                        width: 2.5rem;
                        position: relative;
                        //background-color: greenyellow;
                        i{
                            margin-top: 0.1rem;
                        }
                        p{
                            position: absolute;
                            margin-left: 0.3rem;
                        }
                    }
                    .right{
                        width: 0.8rem;
                        height: 0.8rem;
                        position: absolute;
                        right: 0.65rem;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            //border-radius: 50%;
                        }
                        .updata-input{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            //background-color: greenyellow;
                            opacity:0;
                        }
                    }
                    select{
                        direction: rtl; 
                    }
                    .rights{
                        width: auto;
                        height: 0.8rem;
                        position: absolute;
                        right: 0.65rem; 
                        line-height: 0.8rem;
                        text-align: right;
                    }
                    .input{
                        text-align: right;
                        width: 4rem;
                        height: 0.8rem;
                        //background-color: greenyellow;
                    }
                    .textinput{
                        width: 4rem;
                        height: 0.8rem;
                        //background-color: greenyellow;
                    }
                    .vcodeinput{
                        width: 2rem;
                        height: 0.8rem;
                        //background-color: greenyellow
                    }
                    .color-active{
                        position: relative;
                        width: 3rem;
                        text-align: center;
                        //background-color: red;
                    }
                    .color-active::before{
                        content: "";
                        width: 0.01rem;
                        height: 0.46rem;
                        position: absolute;
                        background-color: #A9A9BA;
                        left: 0;
                    }
                }
            }
            .singer-description{
                margin-top: 0.2rem;
                height: 5rem;
                .title{
                    margin-left: 0.3rem;
                    line-height: 1rem;
                }
                textarea{
                    width: 100%;
                    height: 4rem;
                    padding: 0.2rem;
                    box-sizing: border-box;
                    font-size: 0.32rem;
                    border: 0.01rem solid #e9e9e9;
                    outline: none;
                }
            }
            .img-info{
                padding-bottom: 0.5rem;
                .img-item{
                    .title{
                        height: 1rem;
                        i{
                            margin-top: 0.1rem;
                            margin-right: 0.2rem;
                        }
                    }
                    .img-box{
                        overflow: hidden;
                        position: relative;
                        width: 5.2rem;
                        height: 3.27rem;
                        border-radius: 0.1rem;
                        margin: 0 auto 0;
                        p{
                            font-size: 0.6rem
                        }
                        img{
                            width: 100%;
                            height: 100%;
                            //object-fit: cover;
                        }
                        .updata-input{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            //background-color: greenyellow;
                            opacity:0;
                        }
                    }
                }
            }
        }
        .step4{
            height: 8rem;
            padding-top: 0.001rem;
            width: 100%;
            text-align: center;
            .fs-36{
                margin-top: 1.6rem;
            }
            .color-9{
                margin-top: 0.2rem;
            }
        }
        
    }
    .foot-btn{
        //margin-bottom: 0.3rem;
        padding: 0.2rem 0.24rem 0.5rem;
        .step1{
            .center-col{
                margin-bottom: 0.2rem;
                div{
                    background-color: #fff;
                    width: 0.36rem;
                    height: 0.36rem;
                    border-radius: 50%;
                    margin-right: 0.1rem;
                    border: 0.01rem solid #e9e9e9;
                }
                .selected{
                    background-color: #fff;
                    width: 0.36rem;
                    height: 0.36rem;
                    border-radius: 50%;
                    margin-right: 0.1rem;
                    border: 0.01rem solid #F44349;
                    //border: #F44349;
                    p{
                        width: 0.3rem;
                        height: 0.3rem;
                        border-radius: 50%;
                        background-color: #F44349;
                    }
                }
            }
            .bg-p{
                width: 100%;
                height: 0.9rem;
                border-radius: 0.45rem;

            }
        }
        .step2{
            .fs-26{
                margin-bottom: 0.2rem;
            }
            .space-between{
                div{
                    width: 3.2rem;
                    height: 0.9rem;
                    border-radius: 0.45rem;
                }
                .last{
                    background-color: #9b9b9b;
                }
            }
        }
    }
}
</style>